<template>
  <div
    class="ebook-bookmark"
    ref="bookmark"
  >
    <div class="ebook-bookmark-text-wrapper">
      <div
        class="ebook-bookmark-down-wrapper"
        ref="iconDown"
      >
        <span class="iconfont">&#xe910;</span>
      </div>
      <div class="ebook-bookmark-text">{{ text }}</div>
    </div>
    <div
      class="ebook-bookmark-icon-wrapper"
      :style="isFixed ? fixedStyle : {}"
    >
      <bookmark
        :color="color"
        :width="16"
        :height="60"
      ></bookmark>
    </div>
  </div>
</template>

<script>
import Bookmark from '@/components/homePage/ebooks/bookmark.vue';
const WHITE = '#fff';
export default {
  name: "EbooksBookMark",
  components: {
    Bookmark
  },
  props: {
    offsetY: Number,
    isBookMark: Boolean
  },
  computed: {
    fixedStyle() {
      return {
        position: 'fixed',
        right: `${(window.innerWidth - this.$refs.bookmark.clientWidth) / 2}`,
        top: 0
      }
    }
  },
  watch: {
    offsetY: function (v) {
      if (v >= 75 && v <= 88) {
        this.beforeThreshold(v);
      } else if (v >= 88) {
        this.afterThreshold(v);
      } else if (v > 0 && v < 75) {
        // this.beforeHight() // 初始化状态
      } else if (v === 0) {
        this.restore();
      }
    },
    // isBookMark(isBookMark) {
    //   if (isBookMark) {
    //     this.color = BLUE;
    //     this.isFixed = true;
    //   } else {
    //     this.color = WHITE;
    //     this.isFixed = false;
    //   }
    // }
  },
  data() {
    return {
      isFixed: false,
      text: '下拉添加书签',
      color: WHITE,
    };
  },
  methods: {
    beforeHight() {
      if (this.isBookMark) {
        this.text = '下拉删除书签';
        // this.color = BLUE;
        this.isFixed = true;
      } else {
        this.text = '下拉添加书签';
        this.color = WHITE;
        this.isFixed = false;
      }
    },
    beforeThreshold(v) {
      const iconDown = this.$refs.iconDown
      // this.$refs.bookmark.style.top = `${-v}px`;
      this.beforeHight();
      if (iconDown.style.transform === 'rotate(180deg)') {
        iconDown.style.transform = 'rotate(0deg)'
      }
      this.isFixed = false
    },
    afterThreshold(v) {
      const iconDown = this.$refs.iconDown;
      // this.$refs.bookmark.style.top = `${-v}px`;
      if (this.isBookMark) {
        this.text = '松手删除书签';
        // this.color = WHITE;
        this.isFixed = false;
      } else {
        this.text = '松手添加书签';
        // this.color = BLUE;
        this.isFixed = true;
      }
      if (iconDown.style.transform === '' || iconDown.style.transform === 'rotate(0deg)') {
        iconDown.style.transform = 'rotate(180deg)'
      }
    },
    restore() {
      setTimeout(() => {
        // this.$refs.bookmark.style.top = `${-55}px`
        this.$refs.iconDown.style.transform = 'rotate(0deg)'
      }, 200)
      if (this.isFixed) {
        this.isBookMark = true;
        this.$emit('setIsBookmark', true, this.text, this.offsetY);
        this.text = '下拉删除书签';
      } else {
        this.isBookMark = false;
        this.$emit('setIsBookmark', false, this.text, this.offsetY);
        this.text = '下拉添加书签';
      }
    },
  }
};
</script>

<style lang="less" scoped>
.ebook-bookmark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 1.375rem;
  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: 1.2rem;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .ebook-bookmark-down-wrapper {
      font-size: 0.37333rem;
      color: #fff;
      transition: all 0.2s linear;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        font-size: 0.6rem;
        color: #888888;
      }
    }
    .ebook-bookmark-text {
      font-size: 0.6rem;
      color: #888888;
    }
  }
  .ebook-bookmark-icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 0.26667rem;
    .bookmark {
      width: 0;
      height: 0;
      border-width: 0.75rem 0.25rem 0.25rem 0.25rem;
      border-color: white white transparent white;
    }
  }
}
</style>